<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue.js入门教程</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js" ></script>
    <!--<script type="application/javascript" src="../js/vue.js"></script>-->
    <!--style样式来源：oschina　更多评论页面-->
</head>
<body>
<div id="container">
    <div class="col-md-6 col-md-offset-3">
        <h1>Vue demo</h1>
        <div id="app">
            <table class="col-md-6 col-md-offset-3">
                <tr>
                    <th class="text-right" @click="sortBy('id')">编号</th>
                    <th class="text-right" @click="sortBy('name')">书名</th>
                    <th class="text-right" @click="sortBy('author')">作者</th>
                    <th class="text-right" @click="sortBy('price')">价格</th>
                    <th class="text-right">操作</th>
                </tr>
                <!--<tr v-for="book in books | orderBy sortparam">-->
                <!--版本问题，Vue 1.x才能使用 | orderBy sortparam-->
                <tr v-for="book in books | orderBy sortparam">
                    <td class="text-right">{{book.id}}</td>
                    <td class="text-right">{{book.name}}</td>
                    <td class="text-right">{{book.author}}</td>
                    <td class="text-right">{{book.price}}</td>
                    <template v-if="book.id%2==0">
                        <td class="text-right">
                            <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
                        </td>
                    </template>
                    <template v-else>
                        <td class="text-right">
                            <button type="button" class="btn btn-danger"  @click="delBook(book)">删除</button>
                        </td>
                    </template>
                </tr>
                <tr v-show="books.length==0">
                    <td colspan="4"><h3>请添加图书</h3></td>
                </tr>
            </table>
        </div>
        <div id="add-book">
            <legend>添加书籍</legend>
            <div class="form-group">
                <label >书名</label>
                <input type="text" class="form-control" v-model="book.name">
            </div>
            <div class="form-group">
                <label >作者</label>
                <input type="text" class="form-control" v-model="book.author">
            </div>
            <div class="form-group">
                <label >价格</label>
                <input type="text" class="form-control" v-model="book.price">
            </div>
            <button class="btn btn-primary btn-block" @click="addBook()">添加</button>
        </div>
        <div id="say-book">
            <span>评论预览:</span>
            <p style="white-space: pre">{{ message }}</p>
            <br>
            <textarea v-model="message" placeholder="add multiple lines"></textarea>
        </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#container',
        data: {
            message:'',
            sortparam: '',
            book: {
                id: 0,
                author: '',
                name: '',
                price:''
            },
            books: [{
                id: 1,
                author: '曹雪芹',
                name: '红楼梦',
                price: 32.0
            }, {
                id: 2,
                author: '施耐庵',
                name: '水浒传',
                price: 30.0
            }, {
                id: '3',
                author: '罗贯中',
                name: '三国演义',
                price: 24.0
            }, {
                id: 4,
                author: '吴承恩',
                name: '西游记',
                price: 20.0
            }]
        },methods:{
            addBook: function(){
                //计算书的id
                /*book.id改为book.id的最大值+1*/
                this.book.id=this.books.length+1;
                if(this.book.name.toString().length>0&&this.book.author.toString().length>0&&parseFloat(this.book.price)>0){
                    /*TODO：日后完善时请改用ajax 发送至后台->保存在数据库中->并发送ajax刷新请求->获取成功，展示出来 */
                    this.books.push(this.book);
                    this.book='';
                }else {
                    alert("请检查添加图书信息是否填写完整！！！");
                }

                //将input 中的数据重置

            },
            delBook: function(book){
                console.log("版本问题：在/js/vue.js[2.x版]中$remove()方法已被移除");
//          		this.books.$remove(book);
                /*这是我的使用js 原生的splice()实现方法*/
                var index = this.books.indexOf(book)
                if (index !== -1) {
                    this.books.splice(index, 1)
                }
                /*Vue2.x中推荐的方法*/
            },
            sortBy: function (sortparam) {

                /*sort()的比较函数*/
                var compare = function (prop) {
                    return function (obj1, obj2) {
                        var val1 = obj1[prop];
                        var val2 = obj2[prop];

                        if (val1 < val2) {
                            return -1;
                        } else if (val1 > val2) {
                            return 1;
                        } else {
                            return 0;
                        }
                    }
                }
                console.log(sortparam);
                return this.books.sort(compare(sortparam));
            }
        }
    })
</script>
<script>
//    		来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
</script>
</body>
</html>

